<template>
	<view class="page video-list-page">
		<view class="container">
			<view class="search-form" v-if="false">
				<uni-forms ref="form" :modelValue="searchForm">
					<uni-forms-item name="age" label="姓名">
						<input v-model="searchForm.age1">
					</uni-forms-item>
					<uni-forms-item name="age" label="视频分类">
						<input v-model="searchForm.age2">
					</uni-forms-item>
					<uni-forms-item name="age" label="标签">
						<input v-model="searchForm.age3">
					</uni-forms-item>
					<view class="search-btn">
						<button class="button" @click="submit">提交</button>
						<button class="button" @click="emptySearch">清空</button>
					</view>
				</uni-forms>
			</view>
			<view class="video-list">
				<view v-for="(item,index) in videoList" :key="index"
					style="margin-bottom:40upx;width:25%;box-sizing: border-box;">
					<view v-if="isVideo(item.url)" style="padding:0 20upx;">
						<video :ref="'video'+index" class="video_box" :src="item.url" :controls="true"
							@timeupdate="timeupdate" @loadedmetadata="loadedmetadata" />
					</view>
					<view v-else style="padding:0 20upx;">
						<!-- <video :ref="'video'+i" class="video_box" :src="item.url" :controls="true" /> -->
						<img width="100%" height="200" :src="item.url" alt="" srcset="">
					</view>
					<p flex="cross:center">
						<span class="dot" />
						<span class="line" />
					</p>
					<view v-if="item.form">
						<p flex="cross:center"><span class="small_dot" /> 拍摄人：{{ item.form.person || '--' }}</p>
						<p flex="cross:center"><span class="small_dot" /> 类型：{{ item.form.$category || '--' }}</p>
						<p v-if="currentRow.dictId == '13'" flex="cross:center"><span class="small_dot" /> 拍摄设备：{{
						item.form.device || '--' }}</p>
						<p v-if="currentRow.dictId == '13'" flex="cross:center"><span class="small_dot" /> 视频时长：{{
						item.form.duration +'s' || '--' }}</p>
						<p flex="cross:center"><span class="small_dot" /> 文件格式：{{ videoType(item.url) || '--' }}</p>
						<p flex="cross:center"><span class="small_dot" /> 时间：{{
						$u.timeFormat(item.form.creatTime, 'yyyy年mm月dd日 hh时MM分ss秒') || '--'
						}}</p>
						<p v-if="currentRow.dictId == '11'" flex="cross:center"><span class="small_dot" /> 备注：{{
						item.form.remark || '--' }}</p>
						<view v-if="currentRow.dictId == '13'">
							<!-- 		<el-button style="margin-left:26px" size="mini" plain type="success">sss</el-button>
							<el-button style="margin-left:10px" size="mini" plain type="warning" @click="openDrawerDialog(item)">
							  分享</el-button> -->
							<!-- <button style="margin-left:26px" size="mini" plain type="success">sss</button> -->
							<button class="button" style="background-color: #3196fA;color:#fff;border-color: #409EFF;"
								size="mini" type="warning" plain @click="openDrawerDialog(item)">分享</button>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="!videoList.length" text="暂无视频" mode="list"></u-empty>
		</view>
		<u-popup v-model="shareVisible" mode="right" width="40%" @close="emptyShare">
			<view class="share-content">
				<uni-forms ref="shareForm" :modelValue="shareForm">
					<uni-forms-item name="age" label="转发次数">
						<input v-model="shareForm.count1" type="number">
					</uni-forms-item>
					<uni-forms-item name="age" label="可播次数">
						<input v-model="shareForm.count" type="number">
					</uni-forms-item>
					<uni-forms-item name="age" label="到期时间">
						<input v-model="shareForm.endTime">
					</uni-forms-item>
					<view class="share-btn">
						<button class="button" size="mini" @click="submitShare">提交</button>
						<button class="button" size="mini" @click="emptyShare">取消</button>
					</view>
				</uni-forms>
			</view>
		</u-popup>
		<u-modal v-model="modalShow" :content="content" width="50%" show-confirm-button show-cancel-button
			confirm-text="复制链接与密码" @confirm="copyConfirm">
			<view class="slot-content">
				<view class="group">
					<view>链接：</view>
					<view>{{modalForm.url}}</view>
				</view>
				<view class="group">
					<view>密码：</view>
					<view>{{modalForm.password}}</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchForm: {},
				videoList: [],
				currentRow: {},
				videoDuration: [],
				shareVisible: false,
				shareItem: {},
				shareForm: {},
				content: '',
				modalShow: false,
				modalForm: {
					url: '',
					password: ''
				}
			}
		},
		computed: {
			videoType() {
				return (url) => {
					const arr = url.split('.')
					const type = arr[arr.length - 1]
					return type
				}
			},
		},
		onLoad(params) {
			console.log(params);
			let p = new Promise((resolve, reject) => {

				this.getDetailByNoticeId(13, params.noticeId).then(res => {
					resolve(res)
				})

			})

			p.then(res => {
				console.log(res);
				this.currentRow = res
				const jsonStr = JSON.parse(this.currentRow.jsonStr) || []
				console.log(jsonStr);
				jsonStr.forEach(item => {
					this.videoList.push(...item.imgFileList)
				})
				// this.videoList = jsonStr[0] && jsonStr[0].imgFileList || []
				console.log(this.videoList);

				// 获取拍摄时间
				if (this.currentRow.dictId == '13') {
					//  this.$nextTick(() => {
					// this.videoList.forEach((item, i) => {
					//   if (this.isVideo(item.url)) {
					// 	const domI = this.$refs['video' + i][0]
					// 	console.log(domI);
					// 	domI.addEventListener('loadedmetadata', () => {
					// 	  this.$set(this.videoDuration, i, this.$refs['video' + i][0].duration)
					// 	})
					//   }
					// })
					//  })
				}

				this.loadding = false
			})


		},

		methods: {
			timeupdate(e) {
				console.log(e);
			},
			loadedmetadata(e) {
				console.log(e);
			},
			submit() {},
			emptySearch() {},
			async getDetailByNoticeId(dictId, noticeId) {
				return await this.$u.api.record.info(dictId, noticeId).then(res => {
					if (res.code == 200) {
						return res.data;
					}
				});
			},
			openDrawerDialog(item) {
				this.shareVisible = true
				this.shareItem = item
			},
			submitShare() {
				const href = `${this.vuex_config.H5baseUrl}/share/${Math.random().toString(36).slice(2)}`
				const data = {
					...this.shareForm,
					url: this.shareItem.url,
					href
				}
				this.$u.api.share.add(data).then(res => {
					this.shareVisible = false
					this.modalShow = true
					this.modalForm.url = href
					this.modalForm.password = res.msg
				})
			},
			emptyShare() {
				this.shareVisible = false
				this.shareForm = {}
			},
			copyConfirm() {
				const {
					url,
					password
				} = this.modalForm
				let copyStr = `链接是${url},密码是${password}`
				uni.setClipboardData({
					data: copyStr,
					success: function() {
						console.log('success');
						this.modalShow = false
					}
				});
			}
		}
	}
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
	.video-list-page {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		position: relative;
		background-color: #fff;

		.container {
			padding: 30upx;
			padding-bottom: 132upx;
			overflow-y: auto;
		}
	}

	/deep/ .uni-forms {
		.uni-forms-item__content {
			display: flex;
			align-items: center;
			background-color: #FFF;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #DCDFE6;
			color: #606266;

			uni-input {
				padding-left: 20upx;
				font-size: 14px;
			}

		}
	}

	.search-form {
		.uni-forms {
			/deep/ uni-form {
				background-color: #999;

				span {
					display: flex;

					.uni-forms-item__box {
						height: 100%;
						padding-right: 10upx;

						.uni-forms-item__inner {
							padding-bottom: 0;
							height: 100%;
							display: flex;
							align-items: center;

							.uni-forms-item__label {
								justify-content: flex-end !important;
								padding-right: 10upx;
							}

							// .uni-forms-item__content {
							// 	display: flex;
							// 	align-items: center;
							// 	background-color: #FFF;
							// 	background-image: none;
							// 	border-radius: 4px;
							// 	border: 1px solid #DCDFE6;
							// 	color: #606266;
							// }
						}
					}

					.search-btn {
						display: flex;
						align-items: center;

						uni-button {
							margin: 0 10upx;
							// width: 170upx;
							// height: 60upx;
							// line-height: 60upx;
							padding: 18upx 50upx;
							font-size: 12px;
							border-radius: 3px;
							width: auto;
							height: auto;
							line-height: initial;

							&:first-child {
								background-color: #3196fA;
								border-color: #409EFF;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}

	.video-list {
		padding-top: 20upx;
		display: flex;

		video {
			width: 100%;
			height: 400upx;
			box-shadow: 1px 1px 10px #ddd;
		}

		.dot {
			width: 30upx;
			height: 30upx;
			background: #3196FA;
			border-radius: 50%;
			border: 4upx solid #CDE6FF;
		}

		.line {
			height: 2upx;
			flex: 1;
			background: #3196FA
		}
	}

	.share-content {
		padding: 20upx;

		.share-btn {
			display: flex;
			align-items: center;

			uni-button {
				width: 200upx;

				&:first-child {
					background-color: #3196fA;
					border-color: #409EFF;
					color: #fff;
				}
			}
		}
	}

	.slot-content {
		padding: 20upx;
		padding-bottom: 40upx;

		.group {
			display: flex;
			align-items: center;
		}
	}
</style>
